import { Suspense } from "react"
import type { Metadata } from "next"
import { Separator } from "@/components/ui/separator"
import { PlaylistCard } from "@/components/playlist-card"
import { getUserLikedPlaylists } from "@/lib/api-client"
import type { Playlist } from "@/types/playlist"

export const metadata: Metadata = {
    title: "My Playlists",
    description: "View all your playlists.",
}

async function getPlaylists() {
    try {
        // In a real app, we would get the current user's ID from the session
        const userId = localStorage.getItem("userId")  as string
        const response = await getUserLikedPlaylists({ userId, limit: 100 })
        return response.data
    } catch (error) {
        console.error("Error fetching playlists:", error)
        return []
    }
}

export default async function MyPlaylistsPage() {
    const playlists = await getPlaylists()

    return (
        <div className="container py-6">
            <h1 className="text-2xl font-bold">My Playlists</h1>
            <Separator className="my-4" />
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
                <Suspense fallback={<div>Loading playlists...</div>}>
                    {playlists.length > 0 ? (
                        playlists.map((playlist: Playlist) => <PlaylistCard key={playlist.id} playlist={playlist} />)
                    ) : (
                        <div className="col-span-full py-8 text-center text-muted-foreground">
                            You haven't created any playlists yet.
                        </div>
                    )}
                </Suspense>
            </div>
        </div>
    )
}

